﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hui.css-H.js</title>
    <link rel="stylesheet" type="text/css" href="../../../css/Hui.css" />
    <style type="text/css">
    </style>
</head>
<body>
    <div class="H-weixin">
        <!--显示当前选中的字母-->
        <div class="H-weixin-showWord H-display-none"></div>
        <!--滚动区域-->
        <div class="H-weixin-scroll">
            <div class="H-weixin-group">
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <span class="H-icon H-bring-width H-center-all H-theme5-bg H-border-radius3-px"><i class="Hui-iconfont Hui-wo H-color-white"></i></span>
                    <p class="H-text H-flex-item">新的朋友</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <span class="H-icon H-bring-width H-center-all H-theme6-bg H-border-radius3-px"><i class="Hui-iconfont Hui-shezhi H-color-white"></i></span>
                    <p class="H-text H-flex-item">群聊</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <span class="H-icon H-bring-width H-center-all H-theme7-bg H-border-radius3-px"><i class="Hui-iconfont Hui-diqiu H-color-white"></i></span>
                    <p class="H-text H-flex-item">标签</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <span class="H-icon H-bring-width H-center-all H-theme8-bg H-border-radius3-px"><i class="Hui-iconfont Hui-diqiu H-color-white"></i></span>
                    <p class="H-text H-flex-item">公众号</p>
                </div>
            </div>
            <div class="H-weixin-space" data-word="start">星标朋友</div>
            <div class="H-weixin-group">
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <span class="H-icon H-bring-width H-center-all H-theme1-bg H-border-radius3-px"><i class="Hui-iconfont Hui-wo H-color-white"></i></span>
                    <p class="H-text H-flex-item">老爸</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <span class="H-icon H-bring-width H-center-all H-theme2-bg H-border-radius3-px"><i class="Hui-iconfont Hui-shezhi H-color-white"></i></span>
                    <p class="H-text H-flex-item">老妈</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <span class="H-icon H-bring-width H-center-all H-theme4-bg H-border-radius3-px"><i class="Hui-iconfont Hui-diqiu H-color-white"></i></span>
                    <p class="H-text H-flex-item">老弟</p>
                </div>
            </div>
            <div class="H-weixin-space" data-word="A">A</div>
            <div class="H-weixin-group">
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">阿三</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">阿四</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">阿五</p>
                </div>
            </div>
            <div class="H-weixin-space" data-word="B">B</div>
            <div class="H-weixin-group">
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">爸爸</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">霸气</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">八哥</p>
                </div>
            </div>
            <div class="H-weixin-space" data-word="C">C</div>
            <div class="H-weixin-group">
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">场哥</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">车哥</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">吃货</p>
                </div>
            </div>
            <div class="H-weixin-space" data-word="D">D</div>
            <div class="H-weixin-group">
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">大哥</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">大姐</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">打的</p>
                </div>
            </div>
            <div class="H-weixin-space" data-word="E">E</div>
            <div class="H-weixin-group">
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">二哥</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">恶姐</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">儿子</p>
                </div>
            </div>
            <div class="H-weixin-space" data-word="F">F</div>
            <div class="H-weixin-group">
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">房东</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">发哥</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">法海</p>
                </div>
            </div>
            <div class="H-weixin-space" data-word="J">J</div>
            <div class="H-weixin-group">
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">加哥</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">家妹</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">姐姐</p>
                </div>
            </div>
            <div class="H-weixin-space" data-word="Q">Q</div>
            <div class="H-weixin-group">
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">圈圈</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">强哥</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">墙服</p>
                </div>
            </div>
            <div class="H-weixin-space" data-word="end">#</div>
            <div class="H-weixin-group">
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">520</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">* _ *</p>
                </div>
                <div class="H-list-item H-flexbox-horizontal" tapmode="">
                    <p class="H-text H-flex-item">&&&</p>
                </div>
            </div>
        </div>
        <!--左边单词，后续脚本生成-->
        <div class="H-weixin-word H-flexbox-vertical">
            <span class="H-flex-item H-center-all" data-word="arrow"><i class="Hui-iconfont Hui-xiangshagnjiantou"></i></span>
            <span class="H-flex-item H-center-all" data-word="start"><i class="Hui-iconfont Hui-xingxing"></i></span>
            <span class="H-flex-item H-center-all" data-word="A">A</span>
            <span class="H-flex-item H-center-all" data-word="B">B</span>
            <span class="H-flex-item H-center-all" data-word="C">C</span>
            <span class="H-flex-item H-center-all" data-word="D">D</span>
            <span class="H-flex-item H-center-all" data-word="E">E</span>
            <span class="H-flex-item H-center-all" data-word="F">F</span>
            <span class="H-flex-item H-center-all" data-word="G">G</span>
            <span class="H-flex-item H-center-all" data-word="H">H</span>
            <span class="H-flex-item H-center-all" data-word="I">I</span>
            <span class="H-flex-item H-center-all" data-word="J">J</span>
            <span class="H-flex-item H-center-all" data-word="K">K</span>
            <span class="H-flex-item H-center-all" data-word="L">L</span>
            <span class="H-flex-item H-center-all" data-word="M">M</span>
            <span class="H-flex-item H-center-all" data-word="N">N</span>
            <span class="H-flex-item H-center-all" data-word="O">O</span>
            <span class="H-flex-item H-center-all" data-word="P">P</span>
            <span class="H-flex-item H-center-all" data-word="Q">Q</span>
            <span class="H-flex-item H-center-all" data-word="R">R</span>
            <span class="H-flex-item H-center-all" data-word="S">S</span>
            <span class="H-flex-item H-center-all" data-word="T">T</span>
            <span class="H-flex-item H-center-all" data-word="U">U</span>
            <span class="H-flex-item H-center-all" data-word="V">V</span>
            <span class="H-flex-item H-center-all" data-word="W">W</span>
            <span class="H-flex-item H-center-all" data-word="X">X</span>
            <span class="H-flex-item H-center-all" data-word="Y">Y</span>
            <span class="H-flex-item H-center-all" data-word="Z">Z</span>
            <span class="H-flex-item H-center-all" data-word="end">#</span>
        </div>
    </div>
    <script type="text/javascript" src="../../../script/Hui.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            Hui.weixinContact();
        };
    </script>
</body>
</html>